<template>
  <div>
    <textarea id="editor"></textarea>
    <button @click="getdata">获取信息</button>
    <button @click="charu">插入信息</button>
    <button :draggable="true" @dragstart="dragstartFn" >拖拽信息</button>
    <div id="rong"></div>
  </div>
</template>

<script>
import ClassicEditor from "../components/ckeditor5-33.0.0-ding/build/ckeditor";
export default {
  data() {
    return {
      myEditor:"",
    }
  },
  created() {
  },
  mounted() {

    
    ClassicEditor.create(document.querySelector("#editor"))
      .then((editor) => {
        this.myEditor = editor
      })
      .catch((error) => {
        console.error(error)
      })
  },
  methods: {
    charu(){
      //获取编辑器对象
        var editor=this.myEditor
        var viewFragment = editor.data.processor.toView( "<span>这是插入信息</span>" );
        var modelFragment = editor.data.toModel( viewFragment );
        //插入模型片段
        editor.model.insertContent( modelFragment, editor.model.document.selection );

    },
    dragendFn(){
      //var editor=this.myEditor
      //  var viewFragment = editor.data.processor.toView( "neirong" );
      //  var modelFragment = editor.data.toModel( viewFragment );
      //  //插入模型片段
      //  editor.model.insertContent( modelFragment, editor.model.document.selection );
    },
    dragenterFn(e){
      console.log("进入某一个元素了",e)
    },
    dragstartFn(e){
      console.log("拖动执行了",e)
      //拖动开始时设置拖动的文本类型和内容
      e.dataTransfer.setData("text/html", "<p>测试</p>");
    },
    getdata() {
      var kk = document.getElementById("rong")
      var result = this.myEditor.getData()
      
      let tablereg=/\<table\>/
      result=result.replace(tablereg,function($,$1){
        console.log($,$1)
        return "<table border='1px solid #ccc' cellspacing='0'>"
      })
      console.log(result,"查看获取到的信息")
      kk.innerHTML = result
    },
  },
};
</script>

<style>




</style>